<template>
  <div class="common-details">
    <customDetailsTopbar :title="active + '详情'" flag @back="back" />
    <div class="d-scroll listInner px-1">
      <component :is="currentComponent" :company-id="companyId" />
    </div>
  </div>
</template>
<script>
import SafetyComponent from './components/safety/detail'
import environmentComponent from './components/environment/enviorDetail'
import environmentPunishComponent from './components/environment/punishDetail'
import fireFightingComponent from './components/fireFighting/detail'

export default {
  components: {
    SafetyComponent,
    environmentComponent,
    environmentPunishComponent,
    fireFightingComponent
  },
  data() {
    return {
      currentComponent: '',
      title: '事故事件详情',
      list: [
        {
          key: '安全生产',
          value: 'SafetyComponent'
        },
        {
          key: '环保管理',
          value1: 'environmentComponent',
          value2: 'environmentPunishComponent'
        },
        {
          key: '消防管理',
          value: 'fireFightingComponent'
        }
      ],
      companyId: '',
      current: '',
      active: ''
    }
  },
  created() {
    const { current, companyId, active } = this.$route.query
    this.companyId = companyId || ''
    this.current = current || ''
    this.active = active
  },
  mounted() {
    this.list = this.list.find((v) => {
      return v.key.indexOf(this.current) > -1
    })
    if (this.active && this.current === '环保管理') {
      this.currentComponent = this.active === '环境事件' ? this.list.value1 : this.list.value2
    } else {
      this.currentComponent = this.list.value
    }
  },
  methods: {
    // 返回列表
    back() {
      this.$router.push({
        path: '/staging/AccidentEvents',
        query: this.active ? { current: this.current, active: this.active } : { current: this.current }
      })
    }
  }
}
</script>
